<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head th:replace="fragments/header :: head('')">
</head>
<body>
<script type="text/javascript" th:src="@{/static/js/plugins/My97DatePicker/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/static/js/plugins/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" th:src="@{/static/js/plugins/ueditor/ueditor.all.js}"></script>
<div th:replace="fragments/common :: nav">nav</div>
<script th:replace="fragments/crud/script :: all(@{/hotel})"></script>
<div class="container">
    <a class="btn btn-primary" th:href="@{./list}">返回列表</a>
    <hr/>
    <form id="form" class="form-horizontal" th:action="@{/hotel/save}" method="post">
        <div th:replace="fragments/crud/submit :: id"></div>
        <div th:replace="fragments/crud/new-input :: text('name','[酒店名称]')"></div>
        <div th:replace="fragments/crud/new-input :: text('subtitle','![副标题]')"></div>
        <div th:replace="fragments/crud/new-input :: text('contactInformation','![酒店联系方式]')"></div>
        <div th:replace="fragments/crud/new-select :: dict('brand','hotelBrand','![所属品牌]')"></div>
        <div th:replace="fragments/crud/new-select :: dict('type','hotelType','![类型]')"></div>
        <div th:replace="fragments/crud/new-select :: dict('level','hotelLevel','![级别]')"></div>
        <div th:replace="fragments/crud/new-input :: number('startingPrice','![起售价]')"></div>
        <div th:replace="fragments/crud/new-input :: number('marketPrice','![门市价]')"></div>
        <div th:include="fragments/crud/date-picker :: yyyy-mm-dd-not-required-labeled('openingTime','开业时间')"></div>
        <div th:include="fragments/crud/date-picker :: yyyy-mm-dd-not-required-labeled('decorationTime','装修时间')"></div>
        <div th:replace="fragments/crud/new-input :: text('address','![地址]')"></div>
        <div th:replace="fragments/crud/new-editor :: default('briefDescription','[简要描述]')"></div>
        <div th:replace="fragments/crud/new-editor :: default('introduction','[酒店介绍]')"></div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#traffic-guide" aria-controls="traffic-guide" role="tab"
                   data-toggle="tab">交通指南</a></li>
            <li role="presentation">
                <a href="#surrounding-environment" aria-controls="surrounding-environment" role="tab"
                   data-toggle="tab">周围环境</a>
            </li>
            <li role="presentation">
                <a href="#position-distance" aria-controls="position-distance" role="tab"
                   data-toggle="tab">位置距离</a></li>
            <li role="presentation">
                <a href="#special-tips" aria-controls="special-tips" role="tab"
                   data-toggle="tab">特别提示</a></li>
            <li role="presentation">
                <a href="#append-service" aria-controls="append-service" role="tab"
                   data-toggle="tab">附加服务</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="traffic-guide">
                <div th:replace="fragments/crud/editor :: default('trafficGuide')"></div>
            </div>
            <div role="tabpanel" class="tab-pane" id="surrounding-environment">
                <div th:replace="fragments/crud/editor :: default('surroundingEnvironment')"></div>
            </div>
            <div role="tabpanel" class="tab-pane" id="position-distance">
                <div th:replace="fragments/crud/new-editor :: default('positionDistance','!')"></div>
            </div>
            <div role="tabpanel" class="tab-pane" id="special-tips">
                <div th:replace="fragments/crud/new-editor :: default('specialTips','!')"></div>
            </div>
            <div role="tabpanel" class="tab-pane" id="append-service">
                <div th:replace="fragments/crud/editor :: default('appendService')"></div>
            </div>
        </div>
        <div class="form-group">
            <span class="col-sm-2 control-label" for="briefDescription">状态:</span>
            <div class="col-sm-10">
                <input type="checkbox" name="hide" id="hide"/><label for="hide">隐藏</label>
                <input type="checkbox" name="recommend" id="recommend"/><label
                    for="recommend">推荐</label>
            </div>
        </div>
        <div id="supportServiceDiv">
        </div>
        <hr/>
        <div th:replace="fragments/crud/submit :: submit('提交')"></div>
    </form>
</div>
<script th:inline="javascript">
    $(document).ready(function () {

        var supportServices = [];

        $.get({
            url: ctx + "hotel/service/getAll",
            data: {},
            error: function (request) {
                alert("Connection error");
            },
            success: function (data) {

                supportServices = data;

                initSupportServiceCheckboxes(supportServices);

            }
        });
    });

    var initSupportServiceCheckboxes = function (supportServices) {

        $.get({
            url: ctx + "hotel/service/category/getAll",
            data: {},
            error: function (request) {
                alert("Connection error");
            },
            success: function (data) {
                for (var i = 0; lt(i, data.length); i++) {

                    var category = data[i];

                    var html = '<hr/><div class="form-group">';
                    html += '<span class="col-sm-2 control-label">' + category.name + '</span>';
                    html += '<div class="col-sm-10">';
                    for (var j = 0; lt(j, supportServices.length); j++) {
                        if (supportServices[j].category.id == category.id) {
                            html += '<input type="checkbox" id="' + supportServices[j].id + '" value="' + supportServices[j].id + '" name="supportServiceIds" /><label for="' + supportServices[j].id + '">' + supportServices[j].name + '</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
                        }
                    }
                    html += '</div></div>';

                    $("#supportServiceDiv").append(html);
                }
                checkSupportService();
            }
        });
    }

    var checkSupportService = function () {
        var id = $("#id").val();
        if (isNotEmpty(id)) {
            setTimeout(function () {
                $.get({
                    url: ctx + "hotel/support/service/get",
                    data: {hotelId: id},
                    error: function (request) {
                        alert("Connection error");
                    },
                    success: function (data) {
                        for (var i = 0; lt(i, data.length); i++) {
                            var service = data[i].service;
                            $("[value=" + service.id + "]").attr("checked", true);
                        }
                    }
                });
            }, 2000);
        }
    }
</script>
</body>
</html>